<template>
  <div class="small-pdLiving" 
    :style="{'padding-top':tplItemData.modulePadding || tplItemData.modulePadding ==0 ? tplItemData.modulePadding+'px':'5px',
    'padding-bottom':tplItemData.modulePadding || tplItemData.modulePadding ==0 ? tplItemData.modulePadding+'px':'5px',
    'padding-left':tplItemData.levelPadding ? tplItemData.levelPadding+'px':'0px',
    'padding-right':tplItemData.levelPadding ? tplItemData.levelPadding+'px':'0px'}">
    <section class="pdLiving-box"> 
        <ul>
            <a v-for="(item,index) in tplItemData.dataset" href="javascript:;" :key="index" class="bdbox" @click="navToList">
                <!-- <wx-navigator :url="'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + item.roomId">
                    <img :src="item.pic" />
                </wx-navigator> -->
                <img :src="item.pic" />
            </a>
        </ul>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
    name: 'index',
    props: {
        tplItemData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data() {
        return {}
    },
    mounted() {
        // console.log(this.tplItemData, '小程序直播')
    },
    methods: {
        navToList() {
            openPage('/livingList')
        }
    }
})
</script>

<style lang="scss">
    .small-pdLiving {
        .pdLiving-box{
            overflow: hidden;
            ul{
                a{
                    display: block;
                    float: left;
                    width: 100%;
                    margin-right: 20px;
                    overflow-x: hidden;
                    img {
                    width: 100%;
                    height: auto;
                    }
                    &:last-child {
                    margin-right: 0;
                    }
                }
            }
        }
    }
</style>